import { ref } from 'vue';

export function useWeatherChart() {
  const option = ref({});

  const renderCharts = (value1, value2) => {
    option.value = {
      responsive: true,
      maintainAspectRatio: false,
      xAxis: {
        type: 'category',
        data: ['今天', '明天', '周三', '周四'],
        show: false,
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      grid: {
        top: '10%',
        left: '0',
        right: '0',
        bottom: '20%',
      },
      series: [
        {
          name: 'Highest Temperature',
          type: 'line',
          smooth: true,
          data: value1,
          label: {
            show: true,
            color: '#fff',
            formatter: function (params) {
              return `白${params.value}℃`;
            },
          },
        },
        {
          name: 'Lowest Temperature',
          type: 'line',
          smooth: true,
          data: value2,
          label: {
            show: true,
            position: 'bottom',
            color: '#fff',
            formatter: function (params) {
              return `晚${params.value}℃`;
            },
          },
        },
      ],
    };
  };

  return {
    option,
    renderCharts,
  };
}